Google Charts API ব্যবহার করে আপনি Scatter Plot এবং Bubble Chart খুব সহজেই তৈরি করতে পারেন। এই দুটি চার্ট ডেটার মধ্যে সম্পর্ক এবং গতিশীলতা প্রদর্শন করতে ব্যবহৃত হয়। চলুন, বিস্তারিতভাবে দেখি কিভাবে Angular অ্যাপ্লিকেশনে Scatter Plot এবং Bubble Chart তৈরি এবং কাস্টমাইজ করা যায়।

Scatter Plot (স্ক্যাটার প্লট) ব্যবহার

Scatter Plot চার্টে দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা কোরিলেশন প্রদর্শন করা হয়। সাধারণত এটি ডেটার মধ্যে প্যাটার্ন বা প্রবণতা চিহ্নিত করতে ব্যবহৃত হয়।

Scatter Plot উদাহরণ

ধরা যাক, আমরা একটি Scatter Plot তৈরি করব যেখানে এক্স অক্ষ (horizontal axis) থাকবে Time এবং ওয়াই অক্ষ (vertical axis) থাকবে Sales।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Scatter Plot Example';

  chartType = 'ScatterChart';  // Chart Type: Scatter Chart

  chartData = [
    ['Time', 'Sales'],
    [1, 20],
    [2, 30],
    [3, 50],
    [4, 40],
    [5, 60]
  ];  // Scatter Plot Data

  chartOptions = {
    title: 'Sales Over Time',
    hAxis: { title: 'Time', minValue: 0 },
    vAxis: { title: 'Sales', minValue: 0 },
    legend: 'none',  // No legend for scatter plot
    width: 600,
    height: 400
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (Scatter Plot) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• chartData: এটি একটি অ্যারে যেখানে ডেটা পয়েন্টগুলো Time এবং Sales হিসেবে সঞ্চিত আছে।
• chartOptions: এখানে চার্টের টাইটেল, অক্ষের টাইটেল, চার্টের আকার এবং অন্যান্য কাস্টমাইজেশন অপশন সেট করা হয়েছে।

Chart Output:

এটি Time এবং Sales এর মধ্যে সম্পর্ক প্রদর্শন করবে, যেখানে প্রতিটি ডেটা পয়েন্ট একটি স্ক্যাটার পয়েন্ট হিসেবে চার্টে দেখা যাবে।

Bubble Chart (বাবল চার্ট) ব্যবহার

Bubble Chart একটি বিশেষ ধরনের চার্ট যেখানে প্রতিটি বুদ্বুদ একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং বুদ্বুদটির আকার বা রঙ তৃতীয় ভেরিয়েবল দেখায়। এটি তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়।

Bubble Chart উদাহরণ

ধরা যাক, আমরা একটি Bubble Chart তৈরি করব যেখানে এক্স অক্ষ (horizontal axis) থাকবে GDP, ওয়াই অক্ষ (vertical axis) থাকবে Life Expectancy এবং বুদ্বুদটির আকার হবে Population।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Bubble Chart Example';

  chartType = 'BubbleChart';  // Chart Type: Bubble Chart

  chartData = [
    ['Country', 'GDP', 'Life Expectancy', 'Population'],
    ['USA', 21137518, 78.5, 327167439],
    ['China', 14140163, 76.9, 1392730000],
    ['India', 2875144, 68.3, 1366417754],
    ['Germany', 3845630, 81.2, 83166711]
  ];  // Bubble Chart Data

  chartOptions = {
    title: 'GDP vs Life Expectancy vs Population',
    hAxis: { title: 'GDP (in billion USD)' },
    vAxis: { title: 'Life Expectancy' },
    bubble: { textStyle: { fontSize: 12 } },  // Text style for bubbles
    width: 600,
    height: 400
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (Bubble Chart) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• chartData: এতে প্রতিটি ডেটা পয়েন্টে চারটি মান রয়েছে—Country, GDP, Life Expectancy, এবং Population।
• chartOptions: এখানে চার্টের টাইটেল, অক্ষের টাইটেল এবং অন্যান্য কাস্টমাইজেশন অপশন নির্ধারণ করা হয়েছে।

Chart Output:

এটি একটি Bubble Chart তৈরি করবে যেখানে প্রতিটি দেশ একটি বুদ্বুদ দ্বারা উপস্থাপিত হবে। GDP x-অক্ষ এবং Life Expectancy y-অক্ষে থাকবে, এবং বুদ্বুদটির আকার Population এর সাথে সম্পর্কিত হবে।

Scatter Plot এবং Bubble Chart এর মধ্যে পার্থক্য

Conclusion

Scatter Plot এবং Bubble Chart দুটি খুবই শক্তিশালী চার্ট টাইপ, যা ডেটার মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়। Scatter Plot দুইটি ভেরিয়েবলের মধ্যে সম্পর্ক বোঝাতে ব্যবহৃত হয়, যখন Bubble Chart তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে সাহায্য করে, যেখানে তৃতীয় ভেরিয়েবলটি বুদ্বুদটির আকার দ্বারা চিত্রিত হয়।

Google Charts API ব্যবহার করে Angular অ্যাপ্লিকেশনে এই চার্টগুলো সহজেই তৈরি করা যায় এবং কাস্টমাইজ করা যায়, যা ডেটার গভীর বিশ্লেষণ এবং ভিজুয়ালাইজেশনে কার্যকরী ভূমিকা পালন করে।